<!--
 * @Author: 1453937336@qq.com 1453937336@qq.com
 * @Date: 2024-04-22 10:06:47
 * @LastEditors: 1453937336@qq.com 1453937336@qq.com
 * @LastEditTime: 2024-05-27 14:39:58
 * @FilePath: \itforce-hris\src\components\wangeditor\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="editor-container">
    <!--更多参数配置和功能请参考 href="https://www.wangeditor.com/" 相关文档 -->
    <div class="edtior-content">
      <Toolbar
        ref="editor"
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
        @onChange="handleChange"
        @onDestroyed="handleDestroyed"
        @onFocus="handleFocus"
        @onBlur="handleBlur"
        @customAlert="customAlert"
        @customPaste="customPaste"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Postupload } from '@/api/public'
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { DomEditor } from '@wangeditor/editor'
import { i18nChangeLanguage } from '@wangeditor/editor'
const { proxy } = getCurrentInstance();
import { useI18n } from 'vue-i18n';
const { t: $t } = useI18n();
const emits = defineEmits(['htmlValueChange'])
const props = defineProps({
  wangeditor: {
    required: true,
    type: String,
    default: () => '',
  }
})
watch(() => props.wangeditor,
  (newVal) => {
    valueHtml.value = newVal
  },
  {
    flush: 'post',
  }
);
watch(
  () => proxy.$i18n.locale,
  (newVal) => {
    if (newVal === "zh-CN") {
      i18nChangeLanguage('zh-CN')
    } else {
      i18nChangeLanguage('en')
    }
  },
  {
    deep: true,
    immediate: true
  }
);

const mode = ref("default");

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref("");

// 模拟 ajax 异步获取内容
onMounted(() => {
  // setTimeout(() => {
  //     valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
  // }, 1500)
});

// 工具栏配置
// "bold", // 粗体
// "underline", // 下划线
// "italic", // 斜体
// "through", // 删除线
// "code", // 行内代码
// "sub", // 下标
// "sup", // 上标
// "clearStyle", // 清除格式
// "color", // 字体颜色
// "bgColor", // 背景色
// "fontSize", // 字号
// "fontFamily", // 字体
// "indent", // 增加缩进
// "delIndent", // 减少缩进
// "justifyLeft", // 左对齐
// "justifyRight", // 右对齐
// "justifyCenter", // 居中对齐
// "justifyJustify", // 两端对齐
// "lineHeight", // 行高
// "insertImage", // 网络图片
// "deleteImage", // 删除图片
// "editImage", // 编辑图片
// "viewImageLink", // 查看链接
// "imageWidth30", // 图片宽度相对于编辑器宽度的百分比30
// "imageWidth50", // 图片宽度相对于编辑器宽度的百分比50
// "imageWidth100", // 图片宽度相对于编辑器宽度的百分比100
// "divider", // 分割线
// "emotion", // 表情
// "insertLink", // 插入链接
// "editLink", // 修改链接
// "unLink", // 取消链接
// "viewLink", // 查看链接
// "codeBlock", // 代码块
// "blockquote", // 引用
// "headerSelect", // 标题
// "header1", // 标题1
// "header2", // 标题2
// "header3", // 标题3
// "header4", // 标题4
// "header5", // 标题5
// "todo", // 待办
// "redo", // 重做
// "undo", // 撤销
// "fullScreen", // 全屏
// "enter", // 回车
// "bulletedList", // 无序列表
// "numberedList", // 有序列表
// "insertTable", // 插入表格
// "deleteTable", // 删除表格
// "insertTableRow", // 插入行
// "deleteTableRow", // 删除行
// "insertTableCol", // 插入列
// "deleteTableCol", // 删除列
// "tableHeader", // 表头
// "tableFullWidth", // 宽度自适应
// "insertVideo", // 插入网络视频
// "uploadVideo", // 上传视频
// "editVideoSize", // 修改视频尺寸
// "uploadImage", // 上传图片
// "codeSelectLang" // 选择语言
const toolbarConfig = {
  //隐藏的toolbarKey,默认为空
  excludeKeys: [
    'video',
    'insertImage',
    'insertVideo'
  ]
};
const editorConfig = { 
  placeholder: $t('请输入'),
  MENU_CONF: {
    uploadImage: {
      allowedFileTypes:['image/jpg','image/jpeg','image/png'],
      customUpload: async(file,insertFn) => {
        let resultUrl = await uploadImage(file, file.name)
        insertFn(resultUrl)
      }
    }
  }
};

const uploadImage = (file, name) => {
  return new Promise( async (resolve, reject)=>{
    let formData = new FormData()
    formData.append('file', file);
    Postupload(formData).then(res => {
      // consolelog('图片===>>>', res.data);
      resolve(res.data.filePath)
    })
  })
};
// 编辑器回调函数
const handleCreated = (editor) => {
  // consolelog('created', editor);
  // 0bject.seal(editor)
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleChange = (editor) => {
  // consolelog('change:', editor.getHtml());
  emits('htmlValueChange', editor.getHtml())
};
const handleDestroyed = (editor) => {
  // consolelog('destroyed', editor);
};
const handleFocus = (editor) => {
  // consolelog('focus', editor);
};
const handleBlur = (editor) => {
  // consolelog('blur', editor);
};
const customAlert = (info, type) => {
  alert(`【自定义提示】${type} - ${info}`);
};
const customPaste = (editor, event, callback) => {
  // 自定义插入内容
  editor.insertText('xxx');
  // 返回值（注意，vue 事件的返回值，不能用 return）
  callback(false); // 返回 false ，阻止默认粘贴行为
  // callback(true) // 返回 true ，继续默认的粘贴行为
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});


</script>

<style scoped lang="scss">
.editor-container {
  height: 100%;
  .edtior-content {
    border: 1px solid #ccc;
    margin: 0 auto;
    margin-top: 20px;
    width: 100%;
  }
}
</style>
